<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <el-page-header @back="goBack" title="返回" content="提交订单">
        </el-page-header>
      </div>
      <div class="package-auto">
        <div class="package-item" v-if="packageInfo.id">
          <el-card :body-style="{ padding: '0px'}">
            <div slot="header">
              <el-tag><i class="el-icon-bank-card"></i>&nbsp;{{packageInfo.title}}</el-tag>
            </div>
            <div style="padding: 5px">
              <div style="padding: 5px;text-align: center">
                <el-row>
                  <el-col :span="4">支持</el-col>
                  <el-col :span="16" style="text-align: left">功能</el-col>
                  <el-col :span="4">单位</el-col>
                </el-row>
              </div>

              <div v-for="function_item in packageInfo['package_functions']" style="padding: 5px;text-align: center">
                <el-row>
                  <el-col :span="4">
                    <i class="el-icon-check" v-if="function_item.package_package_function_status"></i>
                    <i class="el-icon-close" v-if="!function_item.package_package_function_status"></i>
                  </el-col>
                  <el-col :span="16" style="text-align: left">{{function_item.title}}</el-col>
                  <el-col :span="4">{{function_item.quantity}}{{function_item.unit}}</el-col>
                </el-row>
              </div>
            </div>
            <div style="padding: 14px;">
              <div style="padding: 5px;font-size: 20px;text-align: center">
                ￥{{packageInfo.price}}
              </div>
            </div>
          </el-card>
        </div>
        <SecletSite @emitSelectSite="emitSelectSite" />
        <div style="padding: 5px;" v-if="packageInfo.price <= 0">
          <el-button size="medium" type="primary" :loading="isLoading" style="width: 100%" @click="onSubmitPaymentOrder">立即支付</el-button>
        </div>
      </div>
      <div v-if="packageInfo.price > 0">
        <el-divider>选择支付方式</el-divider>
        <div style="width:100%; float: left;padding-bottom:50px">
          <div style="clear: both"></div>
          <div class="payment-list">
            <div class="payment-item" v-for="item in paymentList" @click="onPaymentSelect(item)">
              <el-image
                style="width: 130px; height: 130px"
                :src="item.cover"
                fit="cover" ></el-image>
            </div>

          </div>
        </div>
      </div>

    </el-card>
    <el-dialog :close-on-click-modal="false" width="500px" :title="paymentInfo.name + '扫码'" :visible.sync="dialogPaymentVisible" @close="closeDialogPayment">
      <div style="text-align: center;padding-bottom: 30px;">
        <el-image
          style="width: 260px; height: 260px"
          :src="paymentOrder.qrcode_url"
          fit="cover" >
          <div slot="placeholder" style="line-height: 200px">
            <i class="el-icon-loading" style="font-size: 50px"></i>
          </div>
          <div slot="error" style="line-height: 200px">
            <i class="el-icon-loading" style="font-size: 50px" v-if="isLoading"></i>
          </div>
        </el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo } from '@/api/package'
import { getPaymentList, paymentOrder, paymentQuery } from '@/api/payment'
import SecletSite from '@/components/SecletSite'
export default {
  name: 'OrderCreate',
  components: { SecletSite },
  data() {
    return {
      loading: false,
      packageInfo: { id: '' },
      paymentList: [],
      dialogPaymentVisible: false,
      isLoading: false,
      paymentOrder: {},
      paymentInfo: {},
      querys: {},
      siteInfo: { id: undefined }
    }
  },
  created() {
    this.querys = this.$route.query
    this.onInfo(this.$route.query?.package_id)
    this.onPaymentList()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    onInfo(packageId) {
      const loading = this.$loading({
        lock: true,
        text: this.$t('common.loadingText'),
        spinner: 'el-icon-loading'
      })
      getInfo(packageId).then(res => {
        this.packageInfo = res
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    onPaymentList() {
      getPaymentList({ page: 1, per_page: 10 }).then(res => {
        this.paymentList = res.data
      })
    },
    onPaymentSelect(item) {
      this.paymentInfo = item
      this.paymentOrder = {}

      const _this = this
      if (_this.isLoading) {
        return
      }
      _this.isLoading = true

      const loading = this.$loading({
        lock: true,
        text: _this.$t('common.loadingText'),
        spinner: 'el-icon-loading',
        customClass: 'loading-custom'
      })
      setTimeout(() => {
        loading.close()

        paymentOrder({
          site_id: _this.siteInfo.id,
          package_id: _this.packageInfo.id,
          payment_id: item.id,
          environment: 1,
          order_id: _this.querys?.order_id
        }).then(res => {
          _this.paymentOrder = res
          if (res.type === 1) {
            _this.dialogPaymentVisible = true
            _this.onPaymentQuery(res.pay_number)
          } else if (res.type === 2) {
            window.location.href = res.page_url
          }

        }).catch(() => {
          _this.isLoading = false
        })
      }, 2000)
    },
    closeDialogPayment() {
      this.dialogPaymentVisible = false
    },
    onPaymentQuery(payNumber) {
      if (!this.dialogPaymentVisible) {
        return
      }
      const _this = this
      setTimeout(() => {
        paymentQuery(payNumber).then(res => {
          const statusArray = [20, 30]
          if (statusArray.includes(res.status)) {
            // 提示跳转...
            _this.notifyMessage(res)
            return
          }

          _this.onPaymentQuery(payNumber)
        })
      }, 2000)
    },
    notifyMessage(res) {
      const _this = this
      this.$message({
        message: '支付成功！正在跳转...',
        type: 'success',
        duration: 3000,
        onClose() {
          // _this.$router.push('/order/order-package')
          window.location.href = '/order/order-package'
        }
      })
    },
    onSubmitPaymentOrder() {
      const _this = this
      _this.isLoading = true

      const loading = this.$loading({
        lock: true,
        text: _this.$t('common.loadingText'),
        spinner: 'el-icon-loading',
        customClass: 'loading-custom'
      })
      setTimeout(() => {
        loading.close()

        paymentOrder({
          site_id: _this.siteInfo.id,
          package_id: _this.packageInfo.id,
          payment_id: '0',
          environment: 1,
          order_id: _this.querys?.order_id
        }).then(res => {
          _this.paymentOrder = res
          _this.notifyMessage(res)
        }).catch(() => {
          _this.isLoading = false
        })
      }, 2000)
    },
    emitSelectSite(data) {
      this.siteInfo = data
    }
  }
}
</script>
<style scoped>
  .package-auto{
    padding-top: 10px;
    width: 400px;
    margin: 0px auto;
  }
  .package-auto .package-item{
    width: 400px;
    min-height: 400px;
    padding: 20px;
  }
  .payment-list{
    width: 400px;
    margin: 0px auto;
  }
  .payment-list .payment-item{
    /*width: 33%;*/
    /*height: 133px;*/
    float: left;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #fff;
  }
  .payment-list .payment-item:hover{
    border: 1px solid #1890ff;
  }
</style>

